<template>
	<view class="news-view">
		<view class="news-list">
			<u-list @scrolltolower="scrolltolower" v-if="newsList">
				<view class="first-news" @tap="goNewsDetail(oneNews)" v-if="oneNews">
					<image :src="oneNews.cover" mode="aspectFit"></image>
					<view class="first-desc">
						<view class="first-title">
							{{oneNews.information}}
						</view>
						<view class="first-content">
							{{oneNews.synopsis}}
						</view>
						<view class="first-date">
							{{oneNews.createTime}}
						</view>
					</view>
				</view>
				<u-list-item v-for="(item, index) in newsList" :key="index">
					<view class="news-item" @tap="goNewsDetail(item)">
						<view class="news-item-left">
							<view class="news-title">
								{{ item.information }}
							</view>
							<view class="news-content">
								{{ item.synopsis }}
							</view>
							<view class="news-date">
								{{ item.createTime }}
							</view>
						</view>
						<image :src="item.cover" mode="aspectFit"></image>
					</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	import { getNewsList } from "@/common/api.js"
	
	export default {
		data() {
			return {
				indexList: [],
				newsList: null,
				oneNews: null
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			goNewsDetail(item) {
				// console.log(123);
				item.informationContent = item.informationContent.replace(/%/g, '%25');
				uni.navigateTo({
					url: `/pages/newsDetails/newsDetails?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				console.log("加载新闻");
			},
			async initNewsList() {
				const res = await getNewsList({
					pageSize: 1000,
					flag: 0
				});
				this.oneNews = res.rows.splice(0, 1)[0];
				this.newsList = res.rows;
				console.log(this.oneNews, this.newsList);
			}
		},
		onLoad() {
			this.initNewsList();
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("news.title")});
		}
	}
</script>

<style lang="scss" scoped>
	.first-news {
		box-shadow: 0rpx 2rpx 0rpx 0rpx rgb(215, 216, 218);

		image {
			width: 100%;
			height: 568rpx;
		}

		.first-desc {
			padding: 32rpx;
			box-sizing: border-box;

			.first-title {
				color: #000000;
				font-family: PingFang SC;
				font-weight: semibold;
				font-size: 40rpx;
				width: 680rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				display: -webkit-box;
				// white-space: nowrap; // 默认不换行；
				-webkit-line-clamp: 2; // 超出多少行
				-webkit-box-orient: vertical;
			}

			.first-content {
				color: #858585;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 24rpx;
				width: 680rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap;
				margin: 16rpx 0;
			}

			.first-date {
				color: #858585;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 24rpx;
			}
		}
	}

	.news-item {
		height: 224rpx;
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		box-shadow: 0rpx 2rpx 0rpx 0rpx rgb(215, 216, 218);

		.news-item-left {
			flex: 1;

			.news-title {
				color: #000000;
				font-family: PingFang SC;
				font-weight: semibold;
				font-size: 32rpx;
				width: 500rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap;
			}

			.news-content {
				color: #858585;
				font-family: PingFang SC;
				font-weight: regular;
				width: 500rpx;
				font-size: 24rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap;
			}

			.news-date {
				color: #858585;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 24rpx;
				margin-top: 30rpx;
			}
		}

		image {
			// flex: 1;
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
		}
	}
</style>
